<template>
  <div>
    {{ name }}
    <p>{{ age }}</p>
    <p>{{ name_age }}</p>
    <p>count: {{ count }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  data() {
    return {
      name: "petter",
      count: ''
    };
  },
  // 将state快速映射为计算属性
  computed: mapState({
    age: "age",
    name_age: function (state) {
      return this.name + state.age;
    },
  }),
  mounted() {
    this.count = this.$store.state.count
  },
};
</script>